<template>
  <div class="addNewAddress">
    <!-- 新增收获地址表单 -->
    <div class="addAddress">
      <van-form validate-first @failed="onFailed">
        <van-cell-group>
          <van-field
            label-width="1.23rem"
            v-model="name"
            name="name"
            label="收货人:"
            placeholder="请填写收货人名称"
            :rules="[{ required: true, message: '请填写收货人名称' }]"
          />
          <van-field
            label-width="3.2rem"
            v-model="tel"
            name="tel"
            placeholder="请填写收货人手机号"
            :rules="[{ telpattern, message: '请填写收货人手机号' }]"
          >
            <template #label>
              <span style="margin-right: 10px;">联系方式:</span> +86
              <span class="addressDrop"></span>
            </template>
          </van-field>
          <van-field
            label-width="1.6rem"
            v-model="area"
            name="area"
            label="所在地区:"
            placeholder="省市区县，乡镇等"
            :rules="[{ required: true, message: '请选择收货地址' }]"
          >
            <template #extra> <span class="addressLocal"></span>定位 </template>
          </van-field>
          <van-field
            label-width="1.6rem"
            v-model="delass"
            name="delass"
            label="详细地址:"
            placeholder="街道，楼牌号"
            :rules="[{ required: true, message: '街道，楼牌号' }]"
          />
        </van-cell-group>
        <div class="bottomAdd" @click="toAddAddress">
          <van-button native-type="submit">
            确认
          </van-button>
        </div>
      </van-form>
      <!-- <van-field name="switch" label="开关">
        <template #input>
          <van-switch v-model="switchChecked" size="20" />
        </template>
      </van-field> -->
      <van-cell class="setting" title="设置为默认地址">
        <template #label>
          <span class="fz10">提醒:每次下单会默认推荐使用该地址</span>
        </template>
        <template #right-icon>
          <van-switch v-model="switchChecked" class="switchAn" size="24" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      name: '',
      tel: '',
      area: '',
      delass: '',
      telpattern: /^1[0-9]{10}$/,
      switchChecked: false
    }
  },
  methods: {
    ...mapMutations('address', ['addAddress']),
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    // 添加收获地址
    toAddAddress() {
      this.$store.commit('address/addAddress', {
        name: this.name,
        tel: this.tel,
        add: this.area + this.delass
      })
      this.$toast('添加收获信息成功,请选择收获地址')
      this.$router.push('/address')
    }
  }
}
</script>

<style lang="less" scoped>
.addNewAddress {
  width: 100vw;
  //   height: 100vh;
  padding-bottom: 60px;
  background: #f7f6fb;
  //   新增表单
  .addAddress {
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    ::v-deep {
      .van-cell__title {
        span {
          color: #afabb7;
        }
      }
      .addressDrop {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #fff url('~@/assets/font/addressDrop.png') no-repeat;
        background-size: 12px 12px;
      }
      .addressLocal {
        position: relative;
        top: 5px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: #fff url('~@/assets/font/addressLocal.png') no-repeat;
        background-size: 16px 16px;
      }
    }

    // height: 400px;
    // .van-cell {
    //   width: 100%;
    //   height: 44px;
    // }
    // .van-field {
    //   height: 44px;
    // }
    .setting {
      height: 62px;
      font-size: 14px;
      font-weight: 400;
      color: #665e75;
      line-height: 20px;
      padding: 12px;
      .van-cell__title {
        & > span {
          color: #665e75;
        }
      }
      .switchAn {
        position: relative;
        top: 8px;
      }
    }
  }
  //  确认
  .bottomAdd {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 60px;
    // padding: 10px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button {
      width: 351px;
      height: 40px;
      color: #fff;
      background: linear-gradient(315deg, #622ccc 0%, #ff5bf4 100%);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
